<!-- 支付设置 -->
<template>
  <div style="padding-left:20px;">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-form-item>
          <el-input v-model="data.name" size="medium" class="iup_width200" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="data.status " size="medium" class="iup_width200" placeholder="请选择状态">
            <el-option v-for="item in statusList" :key="item.code" :label="item.name" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="medium" @click="search">查询</el-button>
        <el-button type="info" size="medium" @click="reset">重置</el-button>
        <el-button type="primary" size="medium" @click="add('create','')">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="getPaymentList" v-loading="loading" element-loading-text="数据加载中" empty-text border stripe>
      <el-table-column type="index" label="序号" width="70"></el-table-column>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="rateName" label="与USDT比例" align="center"></el-table-column>
      <el-table-column prop="qrcodeUrl" label="二维码" align="center">
        <template slot-scope="scope" v-if="scope.row.qrcodeUrl">
          <el-image class="viewer-img" :src="scope.row.qrcodeUrl" :preview-src-list="[scope.row.qrcodeUrl]"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="物理地址" align="center"></el-table-column>
      <el-table-column prop="statusName" label="状态" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.status=='1'?'green':'red'">{{scope.row.statusName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="add('edit',scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页开始 -->
    <pagination :total="total" :pageData="data" @hanleSize="changePage" @hanlePage="handleSizeChange"></pagination>

    <!-- 支付设置新增、修改 -->
    <paymentSettingModal v-if="paymentData.showModal" :statusList="statusList" :paymentData="paymentData" @close="getPaymentSettingList">
    </paymentSettingModal>
  </div>
</template>
<script>
import paymentSettingModal from "component/permissions/paymentSettingModal";
export default {
  components: { paymentSettingModal },
  data () {
    return {
      statusList: [], //状态
      data: {
        pageSize: 10,
        currentPage: 1,
        status: "",
        name: ""
      },
      total: 0,
      loading: false,
      getPaymentList: [],
      paymentData: {}
    };
  },
  methods: {
    //点击页数触发
    changePage (page) {
      this.data.currentPage = page;
      this.getPaymentSettingList();
    },
    //选择页数最多显示几条数据
    handleSizeChange (val) {
      this.data.pageSize = val;
      this.getPaymentSettingList();
    },
    // 获取字典表
    async getterm () {
      this.statusList = await this.common.enumsList("PAYMENT_TYPE_STATUS");
    },
    //搜索条件
    search () {
      this.data.currentPage = 1;
      this.getPaymentSettingList();
    },
    //重置
    reset () {
      Object.assign(this.$data.data, this.$options.data().data);
      this.getPaymentSettingList();
    },
    //获取支付设置列表
    async getPaymentSettingList () {
      //获取列表
      this.loading = true;
      let url = "/paymentType/queryPage";
      let result = await this.request.httpRequest("POST", url, this.data);
      if (result.code == 200) {
        this.total = result.data.totalRows;
        this.data.pageSize = result.data.pageSize;
        this.data.currentPage = result.data.currentPage;
        this.getPaymentList = result.data.datas;
      } else {
        this.$message({ type: "error", message: result.msg });
      }
      this.loading = false;
    },
    // 删除支付设置
    del (row) {
      this.$confirm(`您确定要删除支付设置信息吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        this.loading = true;
        let url = `/paymentType/delete/${row.id}`;
        let result = await this.request.httpRequest("DELETE", url);
        if (result.code == 200) {
          this.$message({ type: "success", message: result.msg });
          this.getPaymentSettingList();
        } else {
          this.loading = false;
          this.$message({ type: "error", message: result.msg });
        }
      });
    },
    add (type, row) {
      this.paymentData = {
        showModal: true,
        id: row.id || "",
        type: type,
        title: type == "create" ? "新增支付设置" : "修改支付设置"
      };
    }
  },
  mounted () {
    this.getterm()
    this.getPaymentSettingList()
  }
};
</script>
<style scoped>
.el-form {
  padding: 15px 0px !important;
}
.el-form-item {
  margin-bottom: 0px !important;
}
</style>